﻿@{
    var active = "active";
    var mainmenu = string.Empty;
    var menucategory = string.Empty;
    var productmenu = string.Empty;
    var bannermenu = string.Empty;
    var ordermenu = string.Empty;
    var newsmenu = string.Empty;
    var usermenu = string.Empty;
    
    if (Session["MenuItem"] != null)
    {
        var menuitem = (MenuItems)Session["MenuItem"];
        switch (menuitem)
        {
            case MenuItems.HomePage:
                mainmenu = active;
                break;
            case MenuItems.Category:
                menucategory = active;
                break;
            case MenuItems.Product:
                productmenu = active;
                break;
            case MenuItems.SlideBanner:
                bannermenu = active;
                break;
            case MenuItems.Order:
                ordermenu = active;
                break;
            case MenuItems.News:
                newsmenu = active;
                break;
            case MenuItems.User:
                usermenu = active;
                break;
            default:
                break;
        }
    }
    else {
        mainmenu = active;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/bootstrap.min.css")
        @Styles.Render("~/Content/layout.css")
        @Styles.Render("~/Content/uielement.css")
        @Styles.Render("~/Content/template.css")
        @Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
        @Scripts.Render("~/Scripts/bootstrap.min.js")
        @RenderSection("scripts", required: false)
         @Html.DevExpress().GetStyleSheets(
            new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
            new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
            new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor },
            new StyleSheet { ExtensionSuite = ExtensionSuite.GridView },
            new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
                       //new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
                       //new StyleSheet { ExtensionSuite = ExtensionSuite.Report },
                       //new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler },
                       //new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList },

            // Default theme for some demos
            new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, Theme = "Default" }
        )
       
        @Html.DevExpress().GetScripts(
            new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
            new Script { ExtensionSuite = ExtensionSuite.HtmlEditor },
            new Script { ExtensionSuite = ExtensionSuite.GridView },
            new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
            new Script { ExtensionSuite = ExtensionSuite.Editors }
            //new Script { ExtensionSuite = ExtensionSuite.Chart },
            //new Script { ExtensionSuite = ExtensionSuite.Report },
            //new Script { ExtensionSuite = ExtensionSuite.Scheduler },
            //new Script { ExtensionSuite = ExtensionSuite.TreeList }
        )
        
        
    </head>
    <body>
        <header class="navbar navbar-fixed-top" id="header">
            <!-- START navbar header -->
            <div class="navbar-header">
                <!-- Brand -->
                <a href="javascript:void(0);" class="navbar-brand">
                    <span class="logo-figure"></span>
                    <span class="logo-text"></span>
                </a>
                <!--/ Brand -->
            </div>
            <!--/ END navbar header -->

            <!-- START Toolbar -->
            <div class="navbar-toolbar clearfix">
                <!-- START Left nav -->
                <ul class="nav navbar-nav navbar-left">
                    <!-- Sidebar shrink -->
                    <li class="hidden-xs hidden-sm">
                        <a title="Minimize sidebar" data-toggle="minimize" class="sidebar-minimize" href="javascript:void(0);">
                            <span class="meta">
                                <span class="icon"></span>
                            </span>
                        </a>
                    </li>
                    <!-- Sidebar shrink -->

                    <!-- Offcanvas left: This menu will take position at the top of template header (mobile only). Make sure that only #header have the `position: relative`, or it may cause unwanted behavior -->
                    <li class="navbar-main hidden-lg hidden-md hidden-sm">
                        <a title="Menu sidebar" rel="tooltip" data-direction="ltr" data-toggle="offcanvas" href="javascript:void(0);">
                            <span class="meta">
                                <span class="icon"><i class="ico-paragraph-left3"></i></span>
                            </span>
                        </a>
                    </li>
                    <!--/ Offcanvas left -->

                    <!-- Message dropdown -->
                    <li id="header-dd-message" class="dropdown custom">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
                            <span class="meta">
                                <span class="icon"><i class="ico-bubbles2"></i></span>
                            </span>
                        </a>

                        <!-- mustache template: used for update the `.media-list` requested from server-side -->
                        <script type="x-tmpl-mustache" class="mustache-template">
                        
                            {{#data}}
                            &lt;a href="page-message-rich.html" class="media border-dotted new"&gt;
                                &lt;span class="pull-left"&gt;
                                    &lt;img src="image/avatar/{{picture}}" class="media-object img-circle" alt=""&gt;
                                &lt;/span&gt;
                                &lt;span class="media-body"&gt;
                                    &lt;span class="media-heading"&gt;{{name}}&lt;/span&gt;
                                    &lt;span class="media-text ellipsis nm"&gt;{{text}}&lt;/span&gt;

                                    {{#meta.star}}&lt;span class="media-meta"&gt;&lt;i class="ico-star3"&gt;&lt;/i&gt;&lt;/span&gt;{{/meta.star}}
                                    {{#meta.reply}}&lt;span class="media-meta"&gt;&lt;i class="ico-reply"&gt;&lt;/i&gt;&lt;/span&gt;{{/meta.reply}}
                                    {{#meta.attachment}}&lt;span class="media-meta"&gt;&lt;i class="ico-attachment"&gt;&lt;/i&gt;&lt;/span&gt;{{/meta.attachment}}
                                    &lt;span class="media-meta pull-right"&gt;{{meta.time}}&lt;/span&gt;
                                &lt;/span&gt;
                            &lt;/a&gt;
                            {{/data}}
                        
                        </script>
                        <!--/ mustache template -->

                        <!-- Dropdown menu -->
                        <div role="menu" class="dropdown-menu">
                            <div class="dropdown-header">
                                <span class="title">Messages <span class="count"></span></span>
                                <span class="option text-right"><a href="javascript:void(0);">New message</a></span>
                            </div>
                            <div class="viewport" style="position: relative; overflow: hidden; width: auto;"><div class="dropdown-body slimscroll" style="overflow: hidden; width: auto;">
                                <!-- Search form -->
                                <form action="" class="form-horizontal">
                                    <div class="has-icon">
                                        <input type="text" placeholder="Search message..." class="form-control">
                                        <i class="ico-search form-control-icon"></i>
                                    </div>
                                </form>
                                <!--/ Search form -->

                                <!-- indicator -->
                                <div class="indicator inline"><span class="spinner"></span></div>
                                <!--/ indicator -->

                                <!-- Message list -->
                                <div class="media-list">
                                    <a class="media border-dotted read" href="page-message-rich.html">
                                        <span class="pull-left">
                                            <img alt="" class="media-object img-circle" src="image/avatar/avatar1.jpg">
                                        </span>
                                        <span class="media-body">
                                            <span class="media-heading">Martina Poole</span>
                                            <span class="media-text ellipsis nm">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</span>
                                            <!-- meta icon -->
                                            <span class="media-meta"><i class="ico-reply"></i></span>
                                            <span class="media-meta"><i class="ico-attachment"></i></span>
                                            <span class="media-meta pull-right">20m</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>

                                    <a class="media border-dotted read" href="page-message-rich.html">
                                        <span class="pull-left">
                                            <img alt="" class="media-object img-circle" src="image/avatar/avatar3.jpg">
                                        </span>
                                        <span class="media-body">
                                            <span class="media-heading">Walter Foster</span>
                                            <span class="media-text ellipsis nm">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
                                            <!-- meta icon -->
                                            <span class="media-meta"><i class="ico-attachment"></i></span>
                                            <span class="media-meta pull-right">21h</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>

                                    <a class="media border-dotted read" href="page-message-rich.html">
                                        <span class="pull-left">
                                            <img alt="" class="media-object img-circle" src="image/avatar/avatar4.jpg">
                                        </span>
                                        <span class="media-body">
                                            <span class="media-heading">Callum Santosr</span>
                                            <span class="media-text ellipsis nm">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
                                            <!-- meta icon -->
                                            <span class="media-meta pull-right">1d</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>

                                    <a class="media border-dotted read" href="page-message-rich.html">
                                        <span class="pull-left">
                                            <img alt="" class="media-object img-circle" src="image/avatar/avatar5.jpg">
                                        </span>
                                        <span class="media-body">
                                            <span class="media-heading">Noelani Blevins</span>
                                            <span class="media-text ellipsis nm">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.</span>
                                            <!-- meta icon -->
                                            <span class="media-meta pull-right">2d</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>

                                    <a class="media border-dotted read" href="page-message-rich.html">
                                        <span class="pull-left">
                                            <img alt="" class="media-object img-circle" src="image/avatar/avatar8.jpg">
                                        </span>
                                        <span class="media-body">
                                            <span class="media-heading">Carl Johnson</span>
                                            <span class="media-text ellipsis nm">Curabitur consequat, lectus sit amet luctus vulputate, nisi sem</span>
                                            <!-- meta icon -->
                                            <span class="media-meta"><i class="ico-attachment"></i></span>
                                            <span class="media-meta pull-right">2w</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>

                                    <a class="media border-dotted read" href="page-message-rich.html">
                                        <span class="pull-left">
                                            <img alt="" class="media-object img-circle" src="image/avatar/avatar9.jpg">
                                        </span>
                                        <span class="media-body">
                                            <span class="media-heading">Tamara Moon</span>
                                            <span class="media-text ellipsis nm">Aliquam ultrices iaculis odio. Nam interdum enim non nisi. Aenean eget metus.</span>
                                            <!-- meta icon -->
                                            <span class="media-meta"><i class="ico-attachment"></i></span>
                                            <span class="media-meta pull-right">2w</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>
                                </div>
                                <!--/ Message list -->
                            </div><div class="scrollbar" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); width: 6px; position: absolute; top: 0px; opacity: 0.4; border-radius: 7px; z-index: 99; right: 0px; display: block;"></div><div class="scrollrail" style="width: 6px; height: 100%; position: absolute; top: 0px; display: block; border-radius: 7px; background: none repeat scroll 0% 0% rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 0px;"></div></div>
                        </div>
                        <!--/ Dropdown menu -->
                    </li>
                    <!--/ Message dropdown -->

                    <!-- Notification dropdown -->
                    <li id="header-dd-notification" class="dropdown custom">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
                            <span class="meta">
                                <span class="icon"><i class="ico-bell"></i></span>
                                <span class="hasnotification hasnotification-danger"></span>
                            </span>
                        </a>

                        <!-- mustache template: used for update the `.media-list` requested from server-side -->
                        <script type="x-tmpl-mustache" class="mustache-template">
                        
                            {{#data}}
                            &lt;a href="javascript:void(0);" class="media border-dotted new"&gt;
                                &lt;span class="media-object pull-left"&gt;
                                    &lt;i class="{{icon}}"&gt;&lt;/i&gt;
                                &lt;/span&gt;
                                &lt;span class="media-body"&gt;
                                    &lt;span class="media-text"&gt;{{{text}}}&lt;/span&gt;
                                    &lt;span class="media-meta pull-right"&gt;{{meta.time}}&lt;/span&gt;
                                &lt;/span&gt;
                            &lt;/a&gt;
                            {{/data}}
                        
                        </script>
                        <!--/ mustache template -->

                        <!-- Dropdown menu -->
                        <div role="menu" class="dropdown-menu">
                            <div class="dropdown-header">
                                <span class="title">Notification <span class="count"></span></span>
                                <span class="option text-right"><a href="javascript:void(0);">Clear all</a></span>
                            </div>
                            <div class="viewport" style="position: relative; overflow: hidden; width: auto;"><div class="dropdown-body slimscroll" style="overflow: hidden; width: auto;">
                                <!-- indicator -->
                                <div class="indicator inline"><span class="spinner"></span></div>
                                <!--/ indicator -->

                                <!-- Message list -->
                                <div class="media-list">
                                    <a class="media read border-dotted" href="javascript:void(0);">
                                        <span class="media-object pull-left">
                                            <i class="ico-basket2 bgcolor-info"></i>
                                        </span>
                                        <span class="media-body">
                                            <span class="media-text">Duis aute irure dolor in <span class="text-primary semibold">reprehenderit</span> in voluptate.</span>
                                            <!-- meta icon -->
                                            <span class="media-meta pull-right">2d</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>

                                    <a class="media read border-dotted" href="javascript:void(0);">
                                        <span class="media-object pull-left">
                                            <i class="ico-call-incoming"></i>
                                        </span>
                                        <span class="media-body">
                                            <span class="media-text">Aliquip ex ea commodo consequat.</span>
                                            <!-- meta icon -->
                                            <span class="media-meta pull-right">1w</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>

                                    <a class="media read border-dotted" href="javascript:void(0);">
                                        <span class="media-object pull-left">
                                            <i class="ico-alarm2"></i>
                                        </span>
                                        <span class="media-body">
                                            <span class="media-text">Excepteur sint <span class="text-primary semibold">occaecat</span> cupidatat non.</span>
                                            <!-- meta icon -->
                                            <span class="media-meta pull-right">12w</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>

                                    <a class="media read border-dotted" href="javascript:void(0);">
                                        <span class="media-object pull-left">
                                            <i class="ico-checkmark3 bgcolor-success"></i>
                                        </span>
                                        <span class="media-body">
                                            <span class="media-text">Lorem ipsum dolor sit amet, <span class="text-primary semibold">consectetur</span> adipisicing elit.</span>
                                            <!-- meta icon -->
                                            <span class="media-meta pull-right">14w</span>
                                            <!--/ meta icon -->
                                        </span>
                                    </a>
                                </div>
                                <!--/ Message list -->
                            </div><div class="scrollbar" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); width: 6px; position: absolute; top: 0px; opacity: 0.4; border-radius: 7px; z-index: 99; right: 0px; display: block;"></div><div class="scrollrail" style="width: 6px; height: 100%; position: absolute; top: 0px; display: block; border-radius: 7px; background: none repeat scroll 0% 0% rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 0px;"></div></div>
                        </div>
                        <!--/ Dropdown menu -->
                    </li>
                    <!--/ Notification dropdown -->

                    <!-- Search form toggler  -->
                    <li>
                        <a data-target="#dropdown-form" data-toggle="dropdown" href="javascript:void(0);">
                            <span class="meta">
                                <span class="icon"><i class="ico-search"></i></span>
                            </span>
                        </a>
                    </li>
                    <!--/ Search form toggler -->
                </ul>
                <!--/ END Left nav -->

                <!-- START navbar form -->
                <div id="dropdown-form" class="navbar-form navbar-left dropdown">
                    <form role="search" action="">
                        <div class="has-icon">
                            <input type="text" placeholder="Search application..." class="form-control">
                            <i class="ico-search form-control-icon"></i>
                        </div>
                    </form>
                </div>
                <!-- START navbar form -->

                <!-- START Right nav -->
                <ul class="nav navbar-nav navbar-right">
                    <!-- Profile dropdown -->
                    <li class="dropdown profile">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
                            <span class="meta">
                                <span class="avatar"><img alt="" class="img-circle" src="image/avatar/avatar7.jpg"></span>
                                <span class="text hidden-xs hidden-sm pr5 pl5">@Html.Raw(Session["Username"])</span>
                                <span class="arrow"></span>
                            </span>
                        </a>
                        <ul role="menu" class="dropdown-menu">
                            <li class="pa15">
                                <h5 class="semibold hidden-xs hidden-sm">
                                    <p class="nm">60%</p>
                                    <small class="text-muted">Profile complete</small>
                                </h5>
                                <h5 class="semibold hidden-md hidden-lg">
                                    <p class="nm">Erich Reyes</p>
                                    <small class="text-muted">60% Profile complete</small>
                                </h5>
                                <div class="progress progress-xs nm mt10">
                                    <div style="width: 60%" class="progress-bar progress-bar-warning">
                                        <span class="sr-only">60% Complete</span>
                                    </div>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li><a href="javascript:void(0);"><span class="icon"><i class="ico-user-plus2"></i></span> My Accounts</a></li>
                            <li><a href="javascript:void(0);"><span class="icon"><i class="ico-cog4"></i></span> Profile Setting</a></li>
                            <li><a href="javascript:void(0);"><span class="icon"><i class="ico-question"></i></span> Help</a></li>
                            <li class="divider"></li>
                            <li><a href="@Url.Action("SignOut","Account")"><span class="icon"><i class="ico-exit"></i></span> Sign Out</a></li>
                        </ul>
                    </li>
                    <!--/ Profile dropdown -->

                    <!-- Offcanvas right This menu will take position at the top of template header (mobile only). Make sure that only #header have the `position: relative`, or it may cause unwanted behavior -->
                    <li class="navbar-main">
                        <a title="Feed / contact sidebar" rel="tooltip" data-direction="rtl" data-toggle="offcanvas" href="javascript:void(0);">
                            <span class="meta">
                                <span class="icon"><i class="ico-users3"></i></span>
                            </span>
                        </a>
                    </li>
                    <!--/ Offcanvas right -->
                </ul>
                <!--/ END Right nav -->
            </div>
            <!--/ END Toolbar -->
        </header>

        <aside class="sidebar sidebar-left sidebar-menu">
            <!-- START Sidebar Content -->
            <div class="viewport" style="position: relative; overflow: hidden; width: auto;"><section class="content slimscroll" style="overflow: hidden; width: auto;">
                <h5 class="heading">MENU CHÍNH</h5>
                <!-- START Template Navigation/Menu -->
                <ul data-toggle="menu" class="topmenu">
                    <li class="@mainmenu">
                        <a href="@Url.Action("Index","Home")">
                            <span class="figure"><i class="ico-home2"></i></span>
                            <span class="text">Trang Chủ</span>
                            <span class="number"><span class="label label-danger">10</span></span>
                        </a>
                    </li>
                    <li class="@menucategory">
                        <a data-parent=".topmenu" data-target="#components" data-toggle="submenu" href="@Url.Action("Index","Category")">
                            <span class="figure"><i class="ico-screwdriver"></i></span>
                            <span class="text">Danh Mục</span>
                            <span class="arrow"></span>
                        </a>
                    </li>
                    <li class="@productmenu">
                        <a data-parent=".topmenu" data-target="#form" data-toggle="submenu" href="@Url.Action("Index","Product")">
                            <span class="figure"><i class="ico-quill2"></i></span>
                            <span class="text">Sản Phẩm</span>
                            <span class="arrow"></span>
                        </a>
                    </li>
                    <li class="@bannermenu">
                        <a data-parent=".topmenu" data-target="#table" data-toggle="submenu" href="@Url.Action("Index","Slide")">
                            <span class="figure"><i class="ico-table22"></i></span>
                            <span class="text">Slide & Banner</span>
                            <span class="arrow"></span>
                        </a>
                    </li>
                    <li class="@ordermenu">
                        <a data-parent=".topmenu" data-target="#page" data-toggle="submenu" href="@Url.Action("Index","Order")">
                            <span class="figure"><i class="ico-file6"></i></span>
                            <span class="text">Đơn Hàng</span>
                            <span class="number"><span class="label label-danger">10</span></span>
                        </a>
                    </li>
                    <li class="@newsmenu">
                        <a data-parent=".topmenu" data-target="#chart" data-toggle="submenu" href="javascript:void(0);">
                            <span class="figure"><i class="ico-stats-up"></i></span>
                            <span class="text">Mục Tin Tức</span>
                            <span class="arrow"></span>
                        </a>
                    </li>
                    <li class="@usermenu">
                        <a data-parent=".topmenu" data-target="#layout" data-toggle="submenu" href="@Url.Action("Index","User")">
                            <span class="figure"><i class="ico-grid"></i></span>
                            <span class="text">User</span>
                            <span class="arrow"></span>
                        </a>
                    </li>
                </ul>
                <!--/ END Template Navigation/Menu -->

                <!-- START Sidebar summary -->
                <!-- Summary -->
                <h5 class="heading">Summary</h5>
                <div class="wrapper">
                    <div class="table-layout">
                        <div class="col-xs-5 valign-middle">
                            <span sparkbarcolor="#00B1E1" sparktype="bar" class="sidebar-sparklines"><canvas style="display: inline-block; vertical-align: top; width: 59px; height: 18px;" width="59" height="18"></canvas></span>
                        </div>
                        <div class="col-xs-7 valign-middle">
                            <h5 class="semibold nm">Server uptime</h5>
                            <small class="semibold">1876 days</small>
                        </div>
                    </div>

                    <div class="table-layout">
                        <div class="col-xs-5 valign-middle">
                            <span sparkbarcolor="#91C854" sparktype="bar" class="sidebar-sparklines"><canvas style="display: inline-block; vertical-align: top; width: 59px; height: 18px;" width="59" height="18"></canvas></span>
                        </div>
                        <div class="col-xs-7 valign-middle">
                            <h5 class="semibold nm">Disk usage</h5>
                            <small class="semibold">83.1%</small>
                        </div>
                    </div>

                    <div class="table-layout">
                        <div class="col-xs-5 valign-middle">
                            <span sparkbarcolor="#ED5466" sparktype="bar" class="sidebar-sparklines"><canvas style="display: inline-block; vertical-align: top; width: 59px; height: 18px;" width="59" height="18"></canvas></span>
                        </div>
                        <div class="col-xs-7 valign-middle">
                            <h5 class="semibold nm">Daily visitors</h5>
                            <small class="semibold">56.5%</small>
                        </div>
                    </div>
                </div>
                <!--/ Summary -->
                <!--/ END Sidebar summary -->
            </section><div class="scrollbar" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); width: 6px; position: absolute; top: 0px; opacity: 0.4; border-radius: 7px; z-index: 99; right: 0px; height: 542px; display: none;"></div><div class="scrollrail" style="width: 6px; height: 100%; position: absolute; top: 0px; display: block; border-radius: 7px; background: none repeat scroll 0% 0% rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 0px;"></div></div>
            <!--/ END Sidebar Container -->
        </aside>

        <section role="main" id="main">
            <!-- START Template Container -->
            @RenderBody()
            
            <!--/ END Template Container -->
        </section>

       
       
    </body>
</html>
